<template>
  <div class="container">
    <div class="content">
      <div class="title">店铺基本信息</div>
      <div class="body">
        <div>
          <span class="name">店铺LOGO：</span>
          <img class="logo" :src="shopBasicInfo?.logo" />
        </div>
        <div>
          <span class="name">店铺名称：</span>
          <span class="value">{{ shopBasicInfo?.name }}</span>
        </div>
        <div>
          <span class="name">店铺背景海报图片：</span>
          <img class="bg-poster" :src="shopBasicInfo?.backgroundPoster" />
        </div>
        <div>
          <span class="name">店铺联系手机号码：</span>
          <span class="value">{{ shopBasicInfo?.phone }}</span>
        </div>
        <div>
          <span class="name">店铺标志(flags)：</span>
          <span class="value">
            <el-tag class="flag" type="warning" v-for="(flag, index) in shopBasicInfo?.flags?.split(',')" :key="index">{{ flag }}</el-tag>
          </span>
        </div>
        <div>
          <span class="name">店铺公告：</span>
          <span class="value">{{ shopBasicInfo?.notice }}</span>
        </div>
      </div>
    </div>
    <floating-button size="50px" @click="toEdit">
      <SvgIcon name="edit" size="50%"></SvgIcon>
    </floating-button>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from 'vue'
import ComponentHat from '@/plugins/type'
import { ShopBasicInfo } from '@/types/response/shop'
import FloatingButton from '@/components/floating-button/index.vue'
import router from '@/router'
const { $API, $modal } = <ComponentHat>getCurrentInstance().proxy
const shopBasicInfo = ref<ShopBasicInfo>()
onMounted(async () => {
  const result = await $API.shop.shopBasicInfo()
  if (!result.success) {
    $modal.msgError('无法获取店铺基本信息')
    return
  }
  shopBasicInfo.value = result.data
})

// 去修改基本信息
function toEdit() {
  router.push({ path: '/basic-info/update' })
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;

  .content {
    display: flex;
    overflow: auto;
    padding: 20px;
    width: 100%;
    height: 100%;
    background-color: #fff;
    flex-direction: column;
    box-sizing: border-box;

    .title {
      padding: 0 0 40px;
      font-size: 18px;
      font-weight: bold;
    }

    .body {
      > div {
        display: flex;
        align-items: flex-start;
        margin-bottom: 30px;

        .name {
          display: inline-block;
          margin-right: 20px;
          font-size: 16px;
        }

        .value {
          .flag {
            margin-right: 10px;
          }
        }

        .logo {
          overflow: hidden;
          width: 50px;
          height: 50px;
          border-radius: 5%;
        }

        .bg-poster {
          height: 100px;
        }
      }
    }
  }
}
</style>
